<!--
You can use this form through Camunda Tasklist
by setting the formKey of a BPMN User Task to:
embedded:/forms/task-form.html
-->

<form name="taskForm" class="form-horizontal" role="form">

  <!-- read-only field -->
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text"
             name="name"
             cam-variable-name="name"
             readonly="true"
             class="form-control" />      
    </div>
  </div>

  <!-- checkbox -->
  <div class="form-group">
    <label for="approved" class="col-sm-2 control-label">Approve?</label>
    <div class="col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"
                 name="approved"
                 cam-variable-name="approved"
                 cam-variable-type="Boolean"
                 checked="checked"
                 class="form-control" />
          approved
        </label>
      </div>
    </div>
  </div>

  <!-- drop down list -->
  <div class="form-group">
    <label for="selection" class="col-sm-2 control-label">Select</label>
    <div class="col-sm-10">
      <select
             name="selection"
             cam-variable-name="selection"
             cam-variable-type="String"
             class="form-control">
        <option selected="selected">foo</option>
        <option>bar</option>
      </select>
    </div>
  </div>

  <!-- radio buttons -->
  <div class="form-group">
    <label class="col-sm-2 control-label">Approve?</label>
    <div class="col-sm-10">
      <div class="radio">
        <label>
          <input type="radio" name="approved2" value="yes">
          Yes
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="approved2" value="no">
          No
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="approved2" value="maybe">
          Maybe
        </label>
      </div>
      <script cam-script type="text/form-script">
        var variableManager = camForm.variableManager;

        camForm.on('submit', function() {
            // this callback is executed when the form is submitted, *before* the submit request to
            // the server is executed

            // creating a new variable will add it to the form submit
            variableManager.createVariable({
                name: 'approved2',
                type: 'String',
                value: $('input:radio[name=approved2]:checked').val(),
                isDirty: true
            });
        });
      </script>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-sm-2"
           for="amount">Amount</label>
    <div class="col-sm-10">
      <input cam-variable-name="amount"
             cam-variable-type="Double"
             id="amount"
             name="amount"
             class="form-control"
             type="text"
             required />
      <div class="help">
        (e.g. &quot;30.00&quot;)
      </div>

      <p ng-show="taskForm.amount.$error.camVariableType">
        Note: Input must be a 'Double'.
      </p>

    </div>
  </div>

  <script cam-script type="text/form-script">
  // custom JavaScript goes here
  </script>
</form>
